<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>烟幕干扰弹投放场景3D可视化</title>
    <!-- 引入ECharts库（增加备用CDN） -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            min-height: 100vh;
            box-sizing: border-box;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        #main {
            width: 100%;
            height: 800px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            background-color: white;
        }
        .controls {
            margin-bottom: 15px;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        button {
            margin-right: 10px;
            padding: 8px 16px;
            cursor: pointer;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #3367d6;
        }
        .status {
            color: #666;
            margin-top: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="controls">
            <h3>烟幕干扰弹投放场景可视化</h3>
            <p>操作说明：鼠标拖拽旋转视角 | 滚轮缩放 | 按住Shift键平移</p>
            <button onclick="resetView()">重置视角</button>
            <button onclick="showAll()">显示所有元素</button>
            <button onclick="highlightMissiles()">高亮导弹</button>
            <button onclick="highlightUAVs()">高亮无人机</button>
            <div class="status" id="status">初始化中...</div>
        </div>
        <div id="main"></div>
    </div>

    <script>
        // 确保DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 检查ECharts是否加载成功
            if (typeof echarts === 'undefined') {
                document.getElementById('status').textContent = '错误：ECharts库加载失败，请检查网络连接';
                return;
            }

            // 初始化ECharts实例
            const mainDom = document.getElementById('main');
            if (!mainDom) {
                document.getElementById('status').textContent = '错误：未找到图表容器';
                return;
            }

            const chart = echarts.init(mainDom);
            document.getElementById('status').textContent = '初始化成功，可进行交互操作';

            // 1. 定义所有实体数据
            const data = {
                // 假目标（原点）
                fakeTarget: {
                    name: '假目标O',
                    coord: [0, 0, 0],
                    symbol: 'star',
                    symbolSize: 20,
                    color: '#000000'
                },
                // 真目标（圆柱）
                realTarget: {
                    name: '真目标T',
                    center: [0, 200, 5],  // 中心坐标
                    radius: 7,
                    height: 10,
                    color: 'rgba(0, 255, 0, 0.6)'
                },
                // 导弹数据
                missiles: [
                    { name: 'M1', pos0: [20000, 0, 2000], color: '#ff0000', symbol: 'triangle', symbolSize: 15 },
                    { name: 'M2', pos0: [19000, 600, 2100], color: '#ffa500', symbol: 'triangle', symbolSize: 15 },
                    { name: 'M3', pos0: [18000, -600, 1900], color: '#8b0000', symbol: 'triangle', symbolSize: 15 }
                ],
                // 无人机数据
                uavs: [
                    { name: 'FY1', pos0: [17800, 0, 1800], color: '#0000ff', symbol: 'square', symbolSize: 15 },
                    { name: 'FY2', pos0: [12000, 1400, 1400], color: '#008000', symbol: 'square', symbolSize: 15 },
                    { name: 'FY3', pos0: [6000, -3000, 700], color: '#800080', symbol: 'square', symbolSize: 15 },
                    { name: 'FY4', pos0: [11000, 2000, 1800], color: '#00ffff', symbol: 'square', symbolSize: 15 },
                    { name: 'FY5', pos0: [13000, -2000, 1300], color: '#ff00ff', symbol: 'square', symbolSize: 15 }
                ]
            };

            // 2. 生成真目标圆柱的点集
            function generateCylinderPoints(center, radius, height, pointCount = 36) {
                const points = [];
                const [x0, y0, z0] = center;
                const zBottom = z0 - height / 2;
                const zTop = z0 + height / 2;

                // 底面圆
                for (let i = 0; i < pointCount; i++) {
                    const angle = (i / pointCount) * 2 * Math.PI;
                    points.push([
                        x0 + radius * Math.cos(angle),
                        y0 + radius * Math.sin(angle),
                        zBottom
                    ]);
                }

                // 顶面圆
                for (let i = 0; i < pointCount; i++) {
                    const angle = (i / pointCount) * 2 * Math.PI;
                    points.push([
                        x0 + radius * Math.cos(angle),
                        y0 + radius * Math.sin(angle),
                        zTop
                    ]);
                }

                // 侧面连接线
                const sideLines = [];
                for (let i = 0; i < pointCount; i += 3) {
                    const angle = (i / pointCount) * 2 * Math.PI;
                    sideLines.push([
                        [x0 + radius * Math.cos(angle), y0 + radius * Math.sin(angle), zBottom],
                        [x0 + radius * Math.cos(angle), y0 + radius * Math.sin(angle), zTop]
                    ]);
                }

                return { points, sideLines };
            }

            const cylinder = generateCylinderPoints(
                data.realTarget.center,
                data.realTarget.radius,
                data.realTarget.height
            );

            // 3. 生成导弹轨迹
            function generateMissileTraj(pos0, targetPos, length = 3000) {
                const dir = [
                    targetPos[0] - pos0[0],
                    targetPos[1] - pos0[1],
                    targetPos[2] - pos0[2]
                ];
                const len = Math.sqrt(dir[0] **2 + dir[1]** 2 + dir[2] ** 2);
                const unitDir = [dir[0]/len, dir[1]/len, dir[2]/len];
                const endPos = [
                    pos0[0] + unitDir[0] * length,
                    pos0[1] + unitDir[1] * length,
                    pos0[2] + unitDir[2] * length
                ];
                return [pos0, endPos];
            }

            // 4. 构建ECharts配置项
            const option = {
                tooltip: {
                    formatter: params => `${params.name}<br>坐标: (${params.value[0].toFixed(0)}, ${params.value[1].toFixed(0)}, ${params.value[2].toFixed(0)})`
                },
                backgroundColor: '#f9f9f9',
                xAxis3D: {
                    name: 'X轴（米）',
                    type: 'value',
                    min: 0,
                    max: 21000,
                    nameTextStyle: { fontSize: 14 }
                },
                yAxis3D: {
                    name: 'Y轴（米）',
                    type: 'value',
                    min: -3500,
                    max: 2500,
                    nameTextStyle: { fontSize: 14 }
                },
                zAxis3D: {
                    name: 'Z轴（米）',
                    type: 'value',
                    min: 0,
                    max: 2200,
                    nameTextStyle: { fontSize: 14 }
                },
                grid3D: {
                    viewControl: {
                        alpha: 45,
                        beta: 45,
                        distance: 300,
                        autoRotate: false,
                        projection: 'perspective' // 使用透视投影增强3D效果
                    },
                    axisLine: { lineStyle: { color: '#333' } },
                    splitLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } }
                },
                series: [
                    // 假目标
                    {
                        name: '假目标O',
                        type: 'scatter3D',
                        symbol: 'star',
                        symbolSize: 20,
                        data: [data.fakeTarget.coord],
                        itemStyle: { color: '#000', borderColor: '#ff0', borderWidth: 2 },
                        label: { show: true, formatter: '假目标O', fontSize: 12 }
                    },
                    // 真目标底面
                    {
                        name: '真目标底面',
                        type: 'scatter3D',
                        symbol: 'circle',
                        symbolSize: 3,
                        data: cylinder.points.slice(0, 36),
                        itemStyle: { color: data.realTarget.color }
                    },
                    // 真目标顶面
                    {
                        name: '真目标顶面',
                        type: 'scatter3D',
                        symbol: 'circle',
                        symbolSize: 3,
                        data: cylinder.points.slice(36),
                        itemStyle: { color: data.realTarget.color }
                    },
                    // 真目标侧面
                    {
                        name: '真目标侧面',
                        type: 'line3D',
                        data: cylinder.sideLines,
                        lineStyle: { color: data.realTarget.color, width: 2 }
                    },
                    // 真目标标签
                    {
                        name: '真目标T',
                        type: 'scatter3D',
                        symbol: 'none',
                        data: [data.realTarget.center],
                        label: {
                            show: true,
                            formatter: '真目标T\n(0,200,0)',
                            fontSize: 10,
                            color: '#080'
                        }
                    }
                ]
            };

            // 添加导弹数据
            data.missiles.forEach(missile => {
                // 导弹位置
                option.series.push({
                    name: `导弹${missile.name}`,
                    type: 'scatter3D',
                    symbol: 'triangle',
                    symbolSize: 15,
                    data: [missile.pos0],
                    itemStyle: { color: missile.color, borderColor: '#000', borderWidth: 1 },
                    label: { show: true, formatter: `导弹${missile.name}`, fontSize: 12 }
                });

                // 导弹轨迹
                const traj = generateMissileTraj(missile.pos0, data.fakeTarget.coord);
                option.series.push({
                    name: `导弹${missile.name}轨迹`,
                    type: 'line3D',
                    data: [traj],
                    lineStyle: { color: missile.color, width: 2, type: 'dashed' }
                });
            });

            // 添加无人机数据
            data.uavs.forEach(uav => {
                option.series.push({
                    name: `无人机${uav.name}`,
                    type: 'scatter3D',
                    symbol: 'square',
                    symbolSize: 15,
                    data: [uav.pos0],
                    itemStyle: { color: uav.color, borderColor: '#000', borderWidth: 1 },
                    label: { show: true, formatter: `无人机${uav.name}`, fontSize: 12 }
                });
            });

            // 设置配置项
            chart.setOption(option);

            // 交互控制函数
            window.resetView = function() {
                chart.setOption({
                    grid3D: {
                        viewControl: { alpha: 45, beta: 45, distance: 300 }
                    }
                });
            };

            window.showAll = function() {
                option.series.forEach(series => {
                    series.itemStyle = series.itemStyle || {};
                    series.lineStyle = series.lineStyle || {};
                    series.itemStyle.opacity = 1;
                    series.lineStyle.opacity = 1;
                });
                chart.setOption(option);
            };

            window.highlightMissiles = function() {
                option.series.forEach(series => {
                    series.itemStyle = series.itemStyle || {};
                    series.lineStyle = series.lineStyle || {};
                    const isMissile = series.name.includes('导弹');
                    series.itemStyle.opacity = isMissile ? 1 : 0.2;
                    series.lineStyle.opacity = isMissile ? 1 : 0.2;
                });
                chart.setOption(option);
            };

            window.highlightUAVs = function() {
                option.series.forEach(series => {
                    series.itemStyle = series.itemStyle || {};
                    series.lineStyle = series.lineStyle || {};
                    const isUAV = series.name.includes('无人机');
                    series.itemStyle.opacity = isUAV ? 1 : 0.2;
                    series.lineStyle.opacity = isUAV ? 1 : 0.2;
                });
                chart.setOption(option);
            };

            // 响应窗口大小变化
            window.addEventListener('resize', () => chart.resize());
        });
    </script>
</body>
</html>
